
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>支付方式饼图</title>
	<link rel="stylesheet" type="text/css" href="../../rs/plugins/easyui/themes/metro/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../rs/plugins/easyui/themes/icon.css">
	<link href="../../rs/css/bootstrap.min.css" rel="stylesheet">
	<link href="../../rs/css/style.min862f.css" rel="stylesheet">
	<link href="../../rs/plugins/datapicker/datepicker3.css" rel="stylesheet">
	<script type="text/javascript" src="../../rs/plugins/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="../../rs/plugins/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../../rs/plugins/easyui/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="../../rs/plugins/easyui/datagrid-groupview.js"></script>
	<script src="../../rs/js/jquery.cookie.js"></script>
	<script src="../../rs/js/common_qj.js"></script>
	<style>
		html,body{ margin:0px; height:100%;}
	</style>
	<?php
  require_once('login.php');
 ?>
</head>
<body >


<div style="padding:10px;border:1px solid #ccc">
	<div class="col-sm-4">
		<div   id="data_5">
			<div class="input-daterange input-group" id="datepicker">
				<input style="height:34px" type="text" class="input-sm form-control" name="start" value="" id="start" />
				<span style="background: #E5E6E7;" class="input-group-addon">到</span>
				<input style="height:34px" type="text" class="input-sm form-control" name="end" value=""  id="end"/>
			</div>
		</div>
	</div>

	<div   class="input-group" style="float: right; margin-right: 10px;width:50px">
		<div class="input-group-btn">
			<button type="button" class="btn " onclick="f_search()" style="margin-left: 8px;
		border-radius:0px;">
				执行
			</button>
		</div>
	</div>
	<div style="clear:both"></div>
</div>
	<div data-options="region:'center'">
		<div id="containerliuliang1" style="min-width: 368px; margin: 0 auto"></div>

	</div>

	<!--页面加载缓冲图标-->
<div id='loadingDiv' style="position:absolute;z-index:1000;top:0px; left:0px;
	width:100%;height:100%;background:white;text-align: center;">
	<h1 style="top: 30%; position: relative;">
		<img src="../../rs/img/loading-2.gif" /><br>
	</h1>
</div>
<script src="../../rs/plugins/datapicker/bootstrap-datepicker.js"></script>
<script>

	/*页面加载缓冲*/
	function closeLoading() {
		$("#loadingDiv").fadeOut("normal", function () {
			$(this).remove();
		});
	}
	var no;
	$.parser.onComplete = function () {
		if (no) clearTimeout(no);
		no = setTimeout(closeLoading, 1000);
	}
	var sign = URLencode($.cookie('sign'));
	//    日期插件js开始
	$("#data_5 .input-daterange").datepicker({keyboardNavigation: !1, forceParse: !1, autoclose: !0});
	var config = {
		".chosen-select": {},
		".chosen-select-deselect": {allow_single_deselect: !0},
		".chosen-select-no-single": {disable_search_threshold: 10},
		".chosen-select-no-results": {no_results_text: "Oops, nothing found!"},
		".chosen-select-width": {width: "95%"}
	};
	//    日期插件js结束
	$(function(){
		if(sign==="undefined"){
			window.location.href = "login.html";
		}
		if ((new Date()).format('dd')==01)
		{var start1=(new Date()).format('dd');
		}else{
			var start1=(new Date()).format('dd')-1;
		}
		var start1=start1.toString();
		if (start1.length == 1) {
			start1 = '0' + start1;
		}

		var start=(new Date()).format('yyyy-MM-'+start1);
		var end=(new Date()).format( 'yyyy-MM-dd');
		$('#start').val(start);
		$('#end').val(end);

	});
	//判断用户权限&加载数据

	function do_search(){
	 var rq1=$('#start').val();
	 var rq2=$('#end').val();
	 layer.msg('数据加载中...', {icon: 16, time: 200000, shade: [0.1, 'black']});
	 $.ajax({
		 type: "post",
		 url:G_url+'repocharts/yyer'+'?sign='+sign,
		 data:"rq1="+rq1+"&rq2="+rq2,
		 dataType: "json",
		 success: function (result){
			 $('#table').datagrid({
			 data: result
			 });
			 layer.closeAll();
		 },
		 error: function (XMLHttpRequest, textStatus, errorThrown) {

		 }
	 });
	 }
</script>

<script src="../../rs/plugins/layer/layer.min.js"></script>
<script src="../../rs/js/bootstrap.js"></script>
<script src="../../rs/plugins/md5.js"></script>
<script src="../../rs/plugins/highchart/highcharts.js"></script>
<script src="../../rs/plugins/highchart/exporting.js"></script>
	<script type="text/javascript">
	function f_search(){
	var rq1=$('#start').val();
	var rq2=$('#end').val();
	var options={
		chart: {
			renderTo: 'containerliuliang1', //图表放入的容器ID
			plotBackgroundColor: null,
			plotBorderWidth: null,
			plotShadow: false
		},
		credits: {
			enabled: false,
		},
		title: {
			text: ''
		},
		tooltip: {
			pointFormat: '{series.name}: <b>( {point.y} ) {point.percentage:.1f}%</b>'
		},
		plotOptions: {
			pie: {
				allowPointSelect: true,
				cursor: 'pointer',
				dataLabels: {
					enabled: true,
					style: {
						color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
					},
					connectorColor: '#000000',
					format: '<b>{point.name}</b>: ( {point.name} ) {point.percentage:.1f} %'
				}
			}
		},
		series: [{
			type: 'pie',
			 
			data: [ ]
		}]
	};
		//获取数据
		$.ajax({
			type: "post",
			url:G_url+'repocharts/fkfs'+'?sign='+sign,
			data:"rq1="+rq1+"&rq2="+rq2,
			dataType: "json",
			success: function (data){
				//饼图1
				options.title.text = rq1+' ~ '+rq2+' 支付方式金额比例（%）' ;
				options.series[0].data =data.data1;
				var chart = new Highcharts.Chart(options); //用前面定义的参数构造一个图表，会自动填充到页面容器中。


			},
			error: function (XMLHttpRequest, textStatus, errorThrown) {
			}
		});
}


	</script>
</body>
</html>
